<template>
    <view class="container" :style="themeColor">
        <view class="header">
            <image mode="widthFix" v-if="infoData.ImgUrl" :src="easyGetImgUrl(infoData.ImgUrl)"></image>
            <image mode="widthFix" v-else :src="easyGetImgUrl(banner)"></image>
        </view>
        <view class="header2">
            <view class="btn-box">
                <text class="djstxt1 mr-10">距离{{ infoData.ActivityStateName == "进行中" ? "结束" : "开始" }}</text>
                <text class="css-djs">{{ Days }}</text>
                <text class="djstxt1">天</text>
                <text class="css-djs">{{ Hours }}</text>
                <text class="djstxt1">:</text>
                <text class="css-djs">{{ Minutes }}</text>
                <text class="djstxt1">:</text>
                <text class="css-djs">{{ Seconds }}</text>
            </view>
        </view>
        <view class="main">
            <view class="product-main-list" :style="{ height: listHeight }">
                <detail  :activityId="id" v-if="isloadding && sales==0" :height="listHeight" :requestData="requestData"></detail>
                <detail-sales :activityId="id" v-if="isloadding && sales==1" :height="listHeight" :requestData="requestData"></detail-sales>
            </view>
        </view>
    </view>
</template>

<script>
import { GetWholeSaleMoneyList, GetUerBalanceByMoneyType } from "@/service/api/member.js"
import { GetNowTime, GetActivitiesInfo, GetActivityProductPage } from "@/service/api/activity.js"
import { GetSalesPolicyProductPage,GetActivitiesInfoSales } from "@/service/api/salesPolicy.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import detail from "@/pages_me/components/activity/detail.vue"
import detailSales from "@/pages_me/components/activity/detail-sales.vue"
import detailItem from "@/pages_me/components/activity/detail-item.vue"
import tabBar from "@/pages_me/components/finance/tab-bar.vue"
export default {
    components: {
        tabBar,
        detail,
		detailSales,
        detailItem,
    },
    data() {
        return {
            banner: "https://oss.hsy884.com/upload/1/2023/06/30/20230630161324335.png",

            isloadding: false,
            datas: [],
            requestData: {
                pageIndex: 1,
                pageSize: 10,
            },
            listHeight: 0,
            total: "",
            id: "",
            Days: "00",
            Hours: "00",
            Minutes: "00",
            Seconds: "00",
            infoData: {},
            nowTime: null,
			sales:0
        }
    },
    onLoad(e) {
        this.id = e.id
		if(e.sales){//促销商品列表
			this.sales = e.sales
			this.getSalesInfo()
		}else{//秒杀特价活动聚合商品列表
			this.getInfo()
		}
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
		getSalesInfo() {
		    let path = "?id=" + this.id
		    GetActivitiesInfoSales(path).then((res) => {
		        if (res.State == 1) {
		            this.infoData = res.Data
		            this.setInterval()
		        }
		    })
		},
        getInfo() {
            let path = "?id=" + this.id
            GetActivitiesInfo(path).then((res) => {
                if (res.State == 1) {
                    this.infoData = res.Data
                    this.setInterval()
                }
            })
        },
        setInterval() {
            var that = this
            //当前时间
            GetNowTime().then((rsp) => {
                if (rsp.State == 1) {
                    that.nowTime = new Date(rsp.Data.replace(/-/g, "/")).getTime()
                    setInterval((e) => {
                        that.nowTime += 1000
                        that.setCountDown()
                    }, 1000)
                }
            })
        },
        //秒杀设置倒计时
        setCountDown() {
            if (!this.nowTime) {
                return
            }
            var diff = new Date(this.infoData.EndDate.replace(/-/g, "/")).getTime() - this.nowTime //时间差的毫秒数
            if (diff < 0) {
                diff = new Date(this.infoData.EndDate.replace(/-/g, "/")).getTime() - this.nowTime //时间差的毫秒数
            }
            if (diff >= 0) {
                //计算出相差天数
                var days = Math.floor(diff / (24 * 3600 * 1000))
                //计算出小时数
                var leave1 = diff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000)
                // item.CountDown = {
                //     Days: (days > 9 ? "" : "0") + days,
                //     Hours: (hours > 9 ? "" : "0") + hours,
                //     Minutes: (minutes > 9 ? "" : "0") + minutes,
                //     Seconds: (seconds > 9 ? "" : "0") + seconds
                // };
                this.Days = (days > 9 ? "" : "0") + days
                this.Hours = (hours > 9 ? "" : "0") + hours
                this.Minutes = (minutes > 9 ? "" : "0") + minutes
                this.Seconds = (seconds > 9 ? "" : "0") + seconds
            } else {
                // this.CountDown = {
                //     Days: "00",
                //     Hours: "00",
                //     Minutes: "00",
                //     Seconds: "00"
                // };
                this.Days = "00"
                this.Hours = "00"
                this.Minutes = "00"
                this.Seconds = "00"
            }
            this.$forceUpdate()
        },
        getListHeight(element) {
			setTimeout(e=>{
				getElementHeight(this, ".product-main-list", (e) => {
				    //再获取列表高度
				    this.listHeight = e + "px"
				    this.isloadding = true
				})
			},500)
            
        },
    },
}
</script>

<style lang="scss">
.container {
}

.header {
    image {
        // height: 360rpx;
        width: 750rpx;
    }
}
.header2 {
    background: linear-gradient(to bottom, #fff9f4, #ffeac5);
    border-radius: 24rpx;
    height: 162rpx;
    margin-top: -65rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    position: relative;
    .btn-box {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 35rpx;
        .djstxt1 {
            color: $color-gray-1;
            font-size: 24rpx;
            font-weight: Medium;
        }
        .mr-10 {
            margin-right: 10rpx;
        }
        .css-djs {
            background-color: $color-gray-1;
            color: #ffffff;
            font-size: 28rpx;
            font-weight: bold;
            border-radius: 8rpx;
            padding: 5rpx 10rpx;
            margin-left: 5rpx;
            margin-right: 5rpx;
            margin-top: -5rpx;
        }
    }
}
.main {
    padding: $app-page-padding $app-page-padding 0 $app-page-padding;
    background: white;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: -60rpx;
    position: relative;
    margin-left: 24rpx;
    margin-right: 24rpx;
}
</style>
